// 1. 通过点击按钮控制 index 改变;
        // 2. 根据index改变去计算 banner_container 元素的left值;
        function Banner(){
            // 获取元素   实例对象添加数据
            this.prev_btn = document.querySelector("#prev_btn");
            this.next_btn = document.querySelector("#next_btn");
            this.slide_container = document.querySelector("#banner_container");
            this.slides = document.querySelectorAll("#banner_container li");

            this.index = 0;
            this.bindEvent();
        }
        Banner.prototype.bindEvent = function(){
            var self = this;
            // 添加点击事件
            this.prev_btn.onclick = function(){
                // 判断点击的是哪个图片,如果是第一张,点击左键的时候,让索引值变为length-1,就是直接切换到最后一张
                // 条件不满足时，就让自身索引值-1，也就是从后往前浏览图片
                if(self.index === 0){
                    // 以索引的值控制图片
                    self.index = self.slides.length - 1
                }else{
                    self.index --;
                }
                self.changeSlide();
            }
            // 添加点击事件
            this.next_btn.onclick = function(){
            // 以索引确定图片 当索引值最大时，说明是最后一张图片，直接将索引值改为1，切换到第二张图片
                if(self.index === self.slides.length - 1){
                    self.slide_container.style.left = 0;
                    self.index = 1;
                }else{
                    // 如果索引值没有达到最大，点击时，索引值自身+1
                    self.index ++;
                }
                self.changeSlide();
            }
        }
        Banner.prototype.changeSlide = function(){
            // this.slide_container.style.left = -this.index * 1380 + "px"
            $(this.slide_container)
            .stop()
            .animate({
                left : -this.index * 1130
            },1000)
        }
        new Banner();

// main部分
// 数据渲染页面
var data=[
    {
        img:'images/main.jpg',
        cardtitle:'拍照时跳广场舞的怪力女孩',
        title:'摄影-人像',
        img1:'images/card-liulan.svg',
        liulan:'5191',
        img2:'images/card-pinglun.svg',
        pinglun:'13',
        img3:'images/card-zan.svg',
        zan:'198',
    },
    {
        img:'images/main1.jpg',
        cardtitle:'拍照时跳广场舞的怪力女孩',
        title:'摄影-人像',
        img1:'images/card-liulan.svg',
        liulan:'6689',
        img2:'images/card-pinglun.svg',
        pinglun:'78',
        img3:'images/card-zan.svg',
        zan:'190',
    },
    {
        img:'images/main2.jpg',
        cardtitle:'拍照时跳广场舞的怪力女孩',
        title:'摄影-人像',
        img1:'images/card-liulan.svg',
        liulan:'5108',
        img2:'images/card-pinglun.svg',
        pinglun:'88',
        img3:'images/card-zan.svg',
        zan:'298',
    },
    {
        img:'images/main3.jpg',
        cardtitle:'拍照时跳广场舞的怪力女孩',
        title:'摄影-人像',
        img1:'images/card-liulan.svg',
        liulan:'6191',
        img2:'images/card-pinglun.svg',
        pinglun:'20',
        img3:'images/card-zan.svg',
        zan:'222',
    },
    {
        img:'images/main4.jpg',
        cardtitle:'拍照时跳广场舞的怪力女孩',
        title:'摄影-人像',
        img1:'images/card-liulan.svg',
        liulan:'5891',
        img2:'images/card-pinglun.svg',
        pinglun:'45',
        img3:'images/card-zan.svg',
        zan:'112',
    }
]
// 获取页面元素
var maincon=document.querySelector('.main-con')
var con=document.querySelector('.main_con')
function fn(data){
   for(var j=0;j<data.length+3;j++){
    for(var i=0;i<data.length;i++){
        maincon.innerHTML+='<div class=main_con>'+
        '<p><img src="'+data[i].img+'" alt=""></p>'+
       ' <div class="main_conx"> '+
            '<h2>'+data[i].cardtitle+'</h2>'+
            '<h4>'+data[i].title+'</h4>'+
           ' <div>'+
                '<em><img src="'+data[i].img1+'" alt=""></em>'+
                '<span>'+data[i].liulan+'</span>'+
                '<em><img src="'+data[i].img2+'" alt=""></em>'+
                '<span>'+data[i].pinglun+'</span>'+
                '<em><img src="'+data[i].img3+'" alt=""></em>'+
               ' <span>'+data[i].zan+'</span>'+
            '</div>'+
        '</div>'+
  ' </div>' 
        } 
    }
}
fn(data)


// card部分
var dada=[
    {
        img:'images/card1.jpg',
        title:'水墨古风人像绘画',
    },
    {
        img:'images/card2.jpg',
        title:'水墨古风人像绘画',
    },
    {
        img:'images/card3.jpg',
        title:'水墨古风人像绘画',
    },
    {
        img:'images/card4.jpg',
        title:'水墨古风人像绘画',
    },
    {
        img:'images/card5.jpg',
        title:'水墨古风人像绘画',
    }
]

// 获取元素
var cardbox=document.querySelector('#cardbox')
var cardbox1=document.querySelector('.card-box')

function fun(dada){
    for(var i=0;i<dada.length;i++){
        cardbox1.innerHTML+='<div class="card_box">'+
        '<li><img src="'+ dada[i].img+'" alt=""></li>'+
        '<h3>'+dada[i].title+'</h3>'+
    '</div>'
    }
}
fun(dada)


// 点击按钮回到顶部

// 获取页面元素
var box=document.querySelector('.box')
console.log(box)
// 触发一个滚动条事件
window.onscroll=function(){
    // 判断滚动条在页面中的位置，当scrollY大于1000的时候，显示按钮
    if(scrollY>600){
        box.style.display="block"
    }else{
        box.style.display="none"
    }
}
// 点击元素，让滚动条回到顶端
// 绑定一个点击事件

box.onclick=function(){
    scrollTo({top:0})
    console.log(1)
}